// import React, { useState, useEffect } from 'react'
// import { AnimatePresence, motion } from 'framer-motion'

// interface PageTransitionProps {
//   locationKey: string
//   children: React.ReactNode
//   duration?: number // 页面翻转动画时长，默认 0.5s
//   maskDuration?: number // 遮罩层显示时长，默认 0.1s
// }

// const PageTransition: React.FC<PageTransitionProps> = ({
//   locationKey,
//   children,
//   duration = 0.5,
//   maskDuration = 1
// }) => {
//   const [showMask, setShowMask] = useState(true)

//   useEffect(() => {
//     // 每次切换路由时触发遮罩层
//     setShowMask(true)
//     const timer = setTimeout(() => setShowMask(false), maskDuration * 1000)
//     return () => clearTimeout(timer)
//   }, [locationKey, maskDuration])

//   const pageFlip = {
//     initial: {
//       rotateY: -90,
//       opacity: 0,
//       transformOrigin: 'left center',
//       perspective: 1000
//     },
//     animate: {
//       rotateY: 0,
//       opacity: 1,
//       transition: { duration, ease: 'easeInOut' }
//     },
//     exit: {
//       rotateY: 90,
//       opacity: 0,
//       transformOrigin: 'right center',
//       transition: { duration, ease: 'easeInOut' }
//     }
//   }

//   return (
//     <div className="relative w-full h-screen overflow-hidden bg-gray-100">
//       {/* 遮罩层 */}
//       <AnimatePresence>
//         {showMask && (
//           <motion.div
//             key="mask"
//             initial={{ opacity: 1 }}
//             animate={{ opacity: 1 }}
//             exit={{ opacity: 0, transition: { duration: 0.2 } }}
//             className="absolute top-0 left-0 w-full h-full bg-black z-50"
//           />
//         )}
//       </AnimatePresence>

//       {/* 页面翻书效果 */}
//       <AnimatePresence mode="wait">
//         <motion.div
//           key={locationKey}
//           variants={pageFlip}
//           initial="initial"
//           animate="animate"
//           exit="exit"
//           className="absolute w-full h-full bg-white shadow-xl rounded-xl p-10"
//         >
//           {children}
//         </motion.div>
//       </AnimatePresence>
//     </div>
//   )
// }

// export default PageTransition
